.login_panel {
    position: fixed;
    z-index: 1040;
    top: 150%;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all .5s ease-in-out;
    background-color: #fff;
    box-shadow: 0 0 5px black;
    -webkit-transition: all .5s ease-in-out;
}

.login_panel.visiable,
.login_panel.visiable {
    -webkit-transform: translateY(-150%);
    transform: translateY(-150%);
}

.login_panel .close {
    margin-right: 2rem;
}

.login_panel .logo {
    width: 100%;
    background: #fff;
}

.login_panel .logo img {
    display: block;
    width: 80%;
    height: 5em;
    margin: 0 auto;
}

.login_panel .container {
    position: relative;
    margin: 2em auto;
    opacity: .9;
    background-color: #fff;
}

.login_panel .container .row {
    margin: 0;
    border-bottom: 1px solid #d6d6d6;
}

.login_panel .container .row:last-child {
    border-bottom: 0;
}

.login_panel .container .credential input {
    width: 100%;
    height: 3em;
    padding: 0 1em;
}

.login_panel .container .password input,
.login_panel .container .sms_code input,
.login_panel .container .repassowd input {
    width: 100%;
    height: 3em;
    padding: 0 1em;
}

.login_panel .container .sms_code input {
    padding: 0;
}

.login_panel .container .sms_code .right {
    padding: .4rem;
}

.login_panel .panel {
    box-shadow: none;
}

.login_panel .panel .left a,
.login_panel .panel .left button {
    font-size: 1em;
    display: block;
    width: 100%;
    text-align: left;
}

.login_panel .panel .right button,
.login_panel .panel .rigth a {
    font-size: 1.5em;
    display: block;
    width: 100%;
    padding: .25em .5em .25em;
    text-align: center;
}

.login_panel button[disabled='disabled'] {
    color: #d6d6d6;
}
